<template>
  <div class="page-container">
    <h1>一、弹窗组件</h1>
    <el-button type="primary" @click="dialog.model = true">打开弹窗</el-button>
    <base-dialog :model="dialog.model" @close="closeDialog">
      <template #body>
        <h1>我是弹窗</h1>
      </template>
      <template #footer>
        <el-button @click="dialog.model = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </template>
      <template #append>
        <base-dialog
          :appendToBody="true"
          :model="appendDialog.model"
          :width="'30%'"
          :showClose="false"
          @close="appendClose"
        >
          <template #body>
            <div>我是内层弹窗</div>
          </template>
        </base-dialog>
      </template>
    </base-dialog>
    <h1>二、原生echarts使用，按需引入</h1>
    <chart-bar></chart-bar>
  </div>
</template>

<script>
import chartBar from '@/components/echarts/chartBar.vue'
export default {
  components: {
    chartBar
  },
  data () {
    return {
      dialog: {
        model: false
      },
      appendDialog: {
        model: false
      },
      fullDialog: {
        model: false
      }
    }
  },
  methods: {
    closeDialog () {
      this.dialog.model = false
    },
    appendClose () {
      this.appendDialog.model = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
